<div bsModal #createOrEditModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createOrEditModal"
    aria-hidden="true" [config]="{ backdrop: 'static', keyboard: !saving }">
    <div class="modal-dialog modal-xxl">
        <div class="modal-content">


            <form *ngIf="active" #userForm="ngForm" novalidate autocomplete="off">

                <div class="modal-header">
                    <h4 class="modal-title">
                        <!-- <span>一般过程申请: {{ workflow.code }}</span> -->
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <ul class="nav nav-tabs  m-tabs-line" style="padding:0px 25px 0px 25px;">
                    <li class="nav-item m-tabs__item">
                        <p-tabMenu [model]="tabs" [activeItem]="tabs[0]">
                            <ng-template pTemplate="item" let-item let-i="index">
                                <div style="position: relative; text-align: center; min-width: 5em;">
                                    <div class="ui-menuitem-text" (click)="tabTypeClick(item.label,item.style)">
                                        {{ item.label }}
                                    </div>
                                </div>
                            </ng-template>
                        </p-tabMenu>
                    </li>
                </ul>
                <div class="modal-body">



                    <!-- <div class="tab-content" style="padding-top:0;"> -->
                    <!-- <p-panel header="任务筛选" [toggleable]="true"  > -->
                    <div *ngIf="index==1">
                        <!-- <div class="col-xl-12"> -->
                        <div class="form-group m-form__group">
                            <div class="input-group">
                                <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input"
                                    [placeholder]="l('SearchWithThreeDot')" type="text">
                                <span class="input-group-btn">
                                    <button (click)="getPipes()" class="btn btn-primary"><i class="flaticon-search-1"
                                            [attr.aria-label]="l('Search')"></i></button>
                                </span>
                            </div>
                        </div>
                        <!-- </div> -->
                        <div class="row" style="overflow: auto;" style="padding:0 15px;">


                            <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                <p-table [value]="primengTableHelper.records" rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                                    [paginator]="false" [lazy]="true" emptyMessage="没有数据" scrollable="true" ScrollWidth="100%"
                                    responsive="primengTableHelper.isResponsive" resizableColumns="primengTableHelper.resizableColumns">
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th class="m-pipeline__base" style="width: 130px;">
                                                操作</th>
                                            <th class="m-pipeline__base">基础信息</th>
                                            <th class="m-pipeline__status">状态信息</th>
                                            <th class="m-pipeline__time">完成时间</th>
                                            <th class="m-pipeline__node">节点信息</th>

                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-record="$implicit">


                                        <tr>

                                            <td style="width: 130px">
                                                <button (click)="joinTask(record)" class="btn btn-primary">
                                                    <i class="fa fa-cog"></i><span class="caret"></span>
                                                    加入
                                                </button>
                                            </td>
                                            <td>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <span class="m-pipeline__title">
                                                            {{record.taskCode}}
                                                        </span>
                                                        <span class="m-pipeline__sub">
                                                            {{record.modelCode}} {{record.batchString}}
                                                        </span>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <span class="m-pipeline__title">
                                                            {{record.drawingCode}}
                                                        </span>
                                                        <span class="m-pipeline__sub">
                                                            {{record.taskName}}
                                                        </span>
                                                    </div>
                                                </div>
                                            </td>

                                            <td>
                                                <span class="m-badge m-badge--success m-badge--wide">
                                                    {{record.statusName}}
                                                </span>
                                            </td>
                                            <td>
                                                <span>
                                                    {{record.dueDatePlanned | momentFormat:'YYYY-MM-DD'}}
                                                </span>
                                            </td>
                                            <td>
                                                <span>
                                                    {{record.actCode}} {{record.actName}}
                                                </span>
                                            </td>


                                        </tr>

                                    </ng-template>
                                </p-table>
                                <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                                    {{'NoData' | localize}}
                                </div>
                                <div class="primeng-paging-container">
                                    <p-paginator rows="5" #paginator (onPageChange)="getPipes($event)" [totalRecords]="primengTableHelper.totalRecordsCount"
                                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">

                                    </p-paginator>
                                    <span class="total-records-count">
                                        {{'TotalRecordsCount' |
                                        localize:primengTableHelper.totalRecordsCount}}
                                    </span>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- </p-panel> -->
                    <!-- <p-panel header="工艺规程" [toggleable]="true" [collapsed]="true" > -->
                    <div *ngIf="index==3">
                        <div class="tech-doc-table">
                            <!-- <div class="col-xl-12"> -->
                            <div class="form-group m-form__group">
                                <div class="input-group">
                                    <input [(ngModel)]="code" name="code" autoFocus class="form-control m-input"
                                        [placeholder]="l('SearchWithThreeDot')" type="text">
                                    <span class="input-group-btn">
                                        <button (click)="getCode(code)" class="btn btn-primary"><i class="flaticon-search-1"
                                                [attr.aria-label]="l('Search')"></i></button>
                                    </span>
                                </div>
                            </div>
                            <!-- </div> -->
                            <div style="padding: 30px 0px;" class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">

                                <p-table [value]="techDocs" selectionMode="single" responsive="primengTableHelper.isResponsive"
                                    [(selection)]="selectedTechDoc" [busyIf]="primengTableHelper.isLoading" dataKey="codeId"
                                    (onRowSelect)="rowSelect($event)" [paginator]="false" [lazy]="true">
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width:200px">编号</th>
                                            <th style="width: 200px">图号</th>
                                            <th style="width: 200px">编者</th>
                                            <th style="width: 200px">时间</th>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-rowData>
                                        <tr [pSelectableRow]="rowData">
                                            <td style="width: 200px">
                                                {{ rowData.codeId }}
                                            </td>
                                            <td style="width: 200px">
                                                {{ rowData.drawingCode }}
                                            </td>
                                            <td style="width: 200px">
                                                {{ rowData.editor }}
                                            </td>
                                            <td style="width: 200px">
                                                {{ rowData.editTime | momentFormat: 'YYYY-MM-DD' }}
                                            </td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                            </div>
                        </div>

                        <div class="m-portlet" style="margin-top: -30px;">
                            <div class="m-portlet__head" style="height: 50px; padding: 15px;">
                                <div class="m-portlet__head-caption">
                                    <div class="m-portlet__head-title">
                                        <span class="m-portlet__head-icon"> <i class="fa fa-cube"></i>
                                        </span>
                                        <h3 class="m-portlet__head-text">材料信息</h3>
                                    </div>
                                </div>
                            </div>
                            <div style="padding: 15px;">
                                <div *ngFor="let rm of techDocView.materials">
                                    <p-table [value]="techDocView.materials">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th style="width:25%; height: 30px; text-align:center;">名称</th>
                                                <th style="width:25%; height: 30px; text-align:center;">原材料牌号</th>
                                                <th style="width:25%; text-align:center;">规格</th>
                                                <th style="width:25%; text-align:center;">计量单位</th>


                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-rowData>
                                            <tr>
                                                <td style="text-align:center; height: 30px;">{{ rowData.paiHao
                                                    }}</td>
                                                <td style="text-align:center;">{{ rowData.paiHaoStandard }}</td>
                                                <th style="text-align:center;">{{ rm.hardness }}</th>
                                                <td style="text-align:center;">{{ rowData.remark }}</td>
                                            </tr>
                                        </ng-template>
                                    </p-table>

                                    <p-table [value]="techDocView.materials">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <!-- <th style="width:13%; height: 30px; text-align:center;">种类</th> -->
                                                <th style="width:25%; text-align:center;">原材料技术条件</th>
                                                <!-- <th style="width:13%; text-align:center;">长度</th> -->
                                                <th style="width:13%; text-align:center;">数量</th>
                                                <!-- <th style="width:18%; text-align:center;">单件质量kg</th>
                                                <th style="width:18%; text-align:center;">全套质量kg</th> -->
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-rowData>
                                            <tr>
                                                <!-- <th style="text-align:center; height: 30px;">{{ rm.category }}</th> -->
                                                <td style="text-align:center;">{{ rowData.size }}</td>
                                                <!-- <th style="text-align:center;">{{ rm.length }}</th> -->
                                                <td style="text-align:center;">{{ rowData.amount }}</td>
                                                <!-- <th style="text-align:center;">{{ rm.weightPerProduct }}</th>
                                                <th style="text-align:center;">{{ rm.weight }}</th> -->
                                            </tr>
                                        </ng-template>
                                    </p-table>
                                </div>
                            </div>
                        </div>
                        <div class="m-portlet" style="margin: -30px 0px 0px 0px;">
                            <div class="m-portlet__head" style="height: 50px; padding: 15px;">
                                <div class="m-portlet__head-caption">
                                    <div class="m-portlet__head-title">
                                        <span class="m-portlet__head-icon"> <i class="fa fa-cubes"></i> </span>
                                        <h3 class="m-portlet__head-text">工序 <small style="float: right;"> 额定工时
                                            </small>
                                        </h3>
                                    </div>
                                </div>
                            </div>
                            <div class="m-portlet__body" style="padding: 15px;">
                                <div class="m-widget4 m-widget4--chart-bottom row">
                                    <div class="m-widget4__item col-4" *ngFor="let proc of techDocView.procs">
                                        <div class="m-widget4__img" style="width: 25px;">
                                            <i class="fa fa-angle-right blod m--font-success" style="font-size: 18px;">{{
                                                proc.sequenceNumber }}</i>
                                        </div>
                                        <div class="m-widget4__info" style="width: 60%;">
                                            <span class="m-widget4__text">
                                                <div class="blod" style="font-size: 16px;">{{ proc.name }}</div>
                                            </span>
                                        </div>
                                        <span class="m-widget4__img">
                                            <span class="m-widget4__text">{{ proc.chunk * 60 }} 分钟 </span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="m-portlet__foot">
                            <div class="row align-items-center">
                                <div class="col-lg-12" style="padding: 30px 0px;">
                                    <button type="button" class="btn btn-sm btn-success float-right" (click)="batchBoundTechDoc()"
                                        [disabled]="!selectedTechDoc?.codeId" [buttonBusy]="saving" [busyText]="'绑定中...'">
                                        <i class="fa fa-check-circle"></i> <span>绑定工艺规程</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- </p-panel> -->

                    <!-- <p-panel header="批量绑定任务" [toggleable]="true"> -->

                    <div *ngIf="index==2">
                        <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                            <p-table [value]="selected" [busyIf]="primengTableHelper.isLoading">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th class="m-pipeline__base">基础信息</th>
                                        <th class="m-pipeline__status">状态信息</th>
                                        <th class="m-pipeline__time">完成时间</th>
                                        <th class="m-pipeline__node">节点信息</th>
                                        <th class="m-pipeline__node">操作</th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit">
                                    <tr>
                                        <td>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <span class="m-pipeline__title">
                                                        {{record.taskCode}}
                                                    </span>
                                                    <span class="m-pipeline__sub">
                                                        {{record.modelCode}} {{record.batchString}}
                                                    </span>
                                                </div>
                                                <div class="col-md-6">
                                                    <span class="m-pipeline__title">
                                                        {{record.drawingCode}}
                                                    </span>
                                                    <span class="m-pipeline__sub">
                                                        {{record.taskName}}
                                                    </span>
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            <span class="m-badge m-badge--success m-badge--wide">
                                                {{record.statusName}}
                                            </span>
                                        </td>
                                        <td>
                                            <span>
                                                {{record.dueDatePlanned | momentFormat:'YYYY-MM-DD'}}
                                            </span>
                                        </td>
                                        <td>
                                            <span>
                                                {{record.actCode}} {{record.actName}}
                                            </span>
                                        </td>
                                        <td>

                                            <button pButton type="button" label="删除" class="ui-button-rounded ui-button-danger"
                                                (click)=" deletePipe(record)"></button>
                                        </td>

                                    </tr>

                                </ng-template>
                            </p-table>
                        </div>
                    </div>
                    <!-- </p-panel> -->
                    <!-- </div> -->
                </div>


                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">
                        取消
                    </button>
                    <button type="button" (click)="save()" class="btn btn-primary" [disabled]="!userForm.form.valid"
                        [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                        <i class="fa fa-save"></i> <span>提交</span>
                    </button>
                </div>

            </form>
        </div>
    </div>


    <!-- <createordinaryform #createOrdinaryForm (modalSave)="getOutsourcing()"></createordinaryform> -->


</div>
<act-base #actBase (modalRun)="getPipes()"></act-base>
